<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @up="upCallback">
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="top">
					<view><image :src="item.displayImg" mode="aspectFit"></image></view>
					<view>
						<view class="title">{{ item.shopName }}</view>
						<text>共{{ item.productCountNum || 0 }}件商品 粉丝{{ item.fensNum || 0 }}</text>
					</view>
					<view class="btns">
						<text class="btn" @tap="enter(item.shopId)">进店</text>
					</view>
				</view>
				<view class="flex flex-wrap">
					<view class="basis-l bgimg flex align-end">
						<image :src="i.originalimg" v-for="(i, j) in item.shopProducts" :key="j" @tap="proUrl(i.productid)" v-if="j==0" mode="widthFix"></image>
					</view>
					<view class="basis-s smimg">
						<image :src="i.originalimg" v-for="(i, j) in item.shopProducts" :key="j" @tap="proUrl(i.productid)" v-if="j>0" mode="widthFix"></image>
					</view>
					
				</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
import ajax from '@/common/request.js';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
var _self;
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
	data() {
		return {
			downOption: {
				use: false // 不使用下拉刷新
			},
			upOption: {
				auto: true,
				noMoreSize: 3 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
			},
			list: [],
			totalPage: 0
		};
	},
	created() {
		_self = this;
	},
	methods: {
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			if (_self.isChangeTab) {
				_self.mescroll.showUpScroll();
			}
			_self
				.getListDataFromNet(page.num, page.size)
				.then(
					curPageData => {
						if (page.num == 1) _self.list = []; //如果是第一页需手动制空列表
						_self.list = _self.list.concat(curPageData); //追加新数据
						_self.$nextTick(() => {
							_self.mescroll.endByPage(curPageData.length, _self.totalPage);
							_self.mescroll.hideUpScroll();
						});
					},
					error => {
						_self.mescroll.endByPage(0, 0);
						_self.mescroll.hideUpScroll();
					}
				)
				.catch(() => {
					//联网失败, 结束加载
					_self.mescroll.endErr();
				});
		},
		/* 获取查询数据 */
		getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
			try {
				let promise = new Promise(function(resolve, reject) {
					ajax({
						url: '/store/searchLvStore',
						data: {
							thePage: pageNum,
							showNumber: 20,
							obj: {
								mid: '',
								shopName: '',
								companyProvince: '',
								companyCity: '',
								companyArea: '',
								marchantType: ''
							}
						},
						success(d) {
							_self.totalPage = d.allPage;
							let tmplst = d.objs || [];
							resolve(tmplst);
						}
					});
				});
				return promise;
			} catch (e) {
				return Promise.reject(e);
			}
		},
		proUrl(proid) {
			uni.navigateTo({
				url: `../aduit/product?proId=${proid}`
			});
		},
		enter(id) {
			uni.navigateTo({
				url: '../aduit/shopIndex?shopId=' + id
			});
		},
	}
};
</script>

<style lang="scss">
	.Info-item {
		view {
			margin-top: 20rpx;
		}
	}

	.list {

		padding: 0 17rpx;
		padding-top: 30rpx;

		.item {
			margin-bottom: 23rpx;
			width: 100%;
			background: #fff;
			border-radius: $page-row-spacing;
			box-shadow: 0 0 $page-row-spacing 0 rgba(9, 2, 4, 0.06);
			padding: $page-row-spacing;
		}

		.top {
			font-size: 24rpx;
			margin-bottom: 10rpx;
			color: $font-color-dark;

			>view {
				vertical-align: middle;
				display: inline-block;
				margin-right: 10rpx;
			}

			image {
				width: 66rpx;
				height: 66rpx;
			}

			.title {
				font-size: 28rpx;
				color: $font-color-light;
				width:280rpx;
			}

			.btns {
				float: right;
			}

			.btn {
				color: #FFFFFF;
				width: 129rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #D03032;
				border-radius: 50rpx;
				margin-left: 10rpx;
				display: inline-block;

				&.active {
					color: #fff;
					background: #FCA434;
				}
			}
		}

		.bgimg {
			image {
				width: 99%;
			}
		}
		
		.smimg {
			image {
				width: 100%;
			}
		}
	}
</style>
